<template>
  <div class="frame">
    <div class="frameMain">
      <div v-for="index in 7" :key="index" class="frameBox">
        <OverMapItem></OverMapItem>
      </div>
    </div>
    <!-- 悬浮关闭按钮 -->
    <el-button :icon="CloseBold" class="floating-close-button" circle @click="closePopup" />
  </div>
</template>
<script setup>
import { CloseBold } from '@element-plus/icons-vue'
const emit = defineEmits(['closePopup'])
import OverMapItem from './OverMapItem.vue'
function closePopup() {
  emit('closePopup')
}
</script>

<style scoped lang="scss">
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.9;
  align-items: center;
  z-index: 2;
  overflow: scroll;
}
.frameMain {
  width: 2932px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.frameBox {
  width: 1446px;
  height: 762px;
  margin: 10px;
}
.floating-close-button {
  position: fixed; /* 固定定位 */
  top: 20px; /* 距离顶部 20px */
  right: 20px; /* 距离右侧 20px */
  width: 60px; /* 按钮宽度 */
  height: 60px; /* 按钮高度 */
  font-size: 24px; /* 图标大小 */
  z-index: 1000; /* 确保按钮在最上层 */
  background-color: rgba(255, 255, 255, 0.4) !important; /* 设置背景透明 */
  border: none !important; /* 移除边框 */
}
.floating-close-button:hover {
  background: rgba(255, 255, 255, 0.8) !important; /* 鼠标悬停时的背景 */
}
</style>
